<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>用户管理 - 咖啡音乐CoffeeMusic后台管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description"
	content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">

<!--
        	作者：wwb
        	时间：2019-03-28
        	描述：导入datatables样式表
        -->
<link
	href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"
	rel="stylesheet">
</head>
<body>

	<div class="lyear-layout-web">
		<div class="lyear-layout-container">
			<!--左侧导航-->
			<aside class="lyear-layout-sidebar">

				<!-- logo -->
				<div id="logo" class="sidebar-header">
					<a href="index.jsp"><img src="images/logo-sidebar.png"
						title="CoffeeMusic" alt="CoffeeMusic" /></a>
				</div>
				<div class="lyear-layout-sidebar-scroll">

					<nav class="sidebar-main">
						<ul class="nav nav-drawer">
							<li class="nav-item"><a href="index.jsp"><i
									class="mdi mdi-home"></i> 后台首页</a></li>
							<li class="nav-item nav-item-has-subnav active open"><a
								href="javascript:void(0)"><i class="mdi mdi-account-circle"></i>
									用户管理</a>
								<ul class="nav nav-subnav">
									<li><a href="userManagement.jsp"><i
											class="mdi mdi-account"></i> 用户</a></li>
								</ul></li>
							<li class="nav-item nav-item-has-subnav">
							<li class="nav-item nav-item-has-subnav "><a
								href="javascript:void(0)"><i class="mdi mdi-music-circle"></i>曲库管理</a>
								<ul class="nav nav-subnav">
									<li><a href="musicManagement.jsp"><i
											class="mdi mdi-music-note"></i> 曲库</a></li>
								</ul></li>

							<li class="nav-item nav-item-has-subnav"><a
								href="javascript:void(0)"><i class="mdi mdi-comment-account"></i>
									评论管理</a>
								<ul class="nav nav-subnav">
									<li><a href="commentsManagement.jsp"><i
											class="mdi mdi-comment-text"></i> 评论</a>
								</ul>
					</nav>

					<div class="sidebar-footer">
						<p class="copyright">
							Copyright &copy; 2019. <a target="_blank"
								href="http://lyear.itshubao.com">CoffeeMusic</a> All rights
							reserved.
						</p>
					</div>
				</div>

			</aside>
			<!--End 左侧导航-->

			<!--头部信息-->
			<header class="lyear-layout-header">

				<nav class="navbar navbar-default">
					<div class="topbar">

						<div class="topbar-left">
							<div class="lyear-aside-toggler">
								<span class="lyear-toggler-bar"></span> <span
									class="lyear-toggler-bar"></span> <span
									class="lyear-toggler-bar"></span>
							</div>
							<span class="navbar-page-title"> CoffeeMusic - 用户管理 </span>
						</div>

						<ul class="topbar-right">
							<li class="dropdown dropdown-profile"><a
								href="javascript:void(0)" data-toggle="dropdown"> <img
									class="img-avatar img-avatar-48 m-r-10"
									src="images/users/avatar.jpg" alt="笔下光年" /> <span>
										${sessionScope.user.uname}<span class="caret"></span>
								</span>
							</a>
								<ul class="dropdown-menu dropdown-menu-right">
									<li><a href="lyear_pages_profile.html"><i
											class="mdi mdi-account"></i> 个人信息</a></li>
									<li><a href="lyear_pages_edit_pwd.html"><i
											class="mdi mdi-lock-outline"></i> 修改密码</a></li>
									<li><a href="javascript:void(0)"><i
											class="mdi mdi-delete"></i> 清空缓存</a></li>
									<li class="divider"></li>
									<li><a href="../login?op=quit"><i
											class="mdi mdi-logout-variant"></i> 退出登录</a></li>
								</ul></li>
						</ul>

					</div>
				</nav>

			</header>
			<!--End 头部信息-->

			<!--页面主要内容-->
			<main class="lyear-layout-content">

			<div class="container-fluid">

				<div class="row">
					<div class="col-lg-12">
						<div class="card">
							<div class="card-toolbar clearfix">

								<div class="toolbar-btn-action">
									<a class="btn btn-primary m-r-5" href="#!" data-toggle="modal"
										data-target="#newUser" data-whatever="@doAddNewUser"><i
										class="mdi mdi-plus"></i> 新增</a>
								</div>
							</div>
							<div class="card-body">

								<div class="table-responsive">
									<table class="table table-bordered" id="userTable">
										<thead>
											<tr>
												<th>ID</th>
												<th>姓名</th>
												<th>等级</th>
												<th>状态</th>
												<th>注册日期</th>
												<th>操作</th>
											</tr>
										</thead>

										<tfoot>
											<tr>
												<th>ID</th>
												<th>姓名</th>
												<th>等级</th>
												<th>状态</th>
												<th>注册日期</th>
												<th>操作</th>
											</tr>
										</tfoot>
									</table>
								</div>

							</div>
						</div>
					</div>

				</div>

			</div>

			</main>
			<!--End 页面主要内容-->
		</div>
	</div>
	<!--新增用户弹窗-->
	<div class="modal fade" id="newUser" tabindex="-1" role="dialog"
		aria-labelledby="newUser">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">新增用户</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="user-name" class="control-label">用户名：</label> <input
								type="text" class="form-control" id="uname1"
								placeholder="请输入用户名...">
						</div>

						<div class="form-group">
							<label for="user-pwd" class="control-label">密码：</label> <input
								type="text" class="form-control" id="pwd1"
								placeholder="请输入密码...">
						</div>

						<div class="form-group">
							<label for="user-level" class="control-label">等级：</label> <select
								id="ulevel1" class="form-control">
								<option value="1">管理员</option>
								<option value="2">普通用户</option>
							</select>
						</div>

						<div class="form-group">
							<label for="user-status" class="control-label">状态：</label> <select
								id="ustatus1" class="form-control">
								<option value="1">启用</option>
								<option value="2">禁用</option>
							</select>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="btn_add">确认添加</button>
				</div>
			</div>
		</div>
	</div>



	<!-- 用户信息更改弹出窗口 -->
	<div class="modal fade" id="updateUser" tabindex="-1" role="dialog"
		aria-labelledby="updateUser">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">更改用户信息</h4>
				</div>
				<div class="modal-body">
					<form>
						<input type="hidden" class="form-control" id="update_uid" value=""><br />
						<div class="form-group">
							<label for="user-name" class="control-label">用户名：</label> <input
								type="text" class="form-control" id="update_uname"
								placeholder="请输入新的用户名...">
						</div>
						<div class="form-group">
							<label for="user-level" class="control-label">等级：</label> <select
								id="update_ulevel" class="form-control">
								<option value="1">管理员</option>
								<option value="2">普通用户</option>
							</select>
						</div>

						<div class="form-group">
							<label for="user-status" class="control-label">状态：</label> <select
								id="update_ustatus" class="form-control">
								<option value="1">启用</option>
								<option value="2">禁用</option>
							</select>
						</div>
						<input type="hidden" class="form-control" id="update_regdate"
							value="">
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="make_update">点击保存</button>
				</div>
			</div>
		</div>
	</div>


	<script type="text/javascript"
		src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="js/main.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
	<script type="text/javascript">
		/* 分页显示用户信息 */
		$(function() {
			$("#userTable")
					.DataTable(
							{
								ajax : "../user?op=getAllUser",
								columns : [
										{
											data : "uid"
										},
										{
											data : "uname"
										},
										{
											data : "ulevel"
										},
										{
											data : "ustatus"
										},
										{
											data : "regdate"
										},
										{
											"defaultContent" : "<button class='btn btn-danger'><i class='mdi mdi-window-close'></i>删除</button>&nbsp;&nbsp;<button class='btn btn-info' data-toggle='modal' data-target='#updateUser'><i class='mdi mdi-account-edit'></i>修改</button>"
										} ],

							})

			/*新增用户“确认添加”按钮事件，点击后提交表单的数据 */
			$("#btn_add").on("click", function() {
				/*获取新增用户表单的信息*/
				var uname = $("#uname1").val();
				var pwd = $("#pwd1").val();
				var ulevel = $("#ulevel1").val();
				var ustatus = $("#ustatus1").val();
				/*向服务器发出ajax请求  */
				if (uname != "" && pwd != "") {
					$.ajax({
						type : "get",
						url : "../user?op=insertUser",
						data : {
							"uname" : uname,
							"pwd" : pwd,
							"ulevel" : ulevel,
							"ustatus" : ustatus
						},
						success : function(data) {
							if (data.msg == "添加成功") {
								alert(data.msg);
								location.reload();
							} else {
								alert(data.msg);
							}
						},
					})
				}

			})

			/*删除用户信息 */
			$(document).on("click", "button[class='btn btn-danger']",
					function() {
						/* 获取删除按钮当前行的用户id发送个服务器 */
						var table = $("#userTable").DataTable();
						var id = table.row($(this).parents("tr")).data().uid;
						$.ajax({
							type : "get",
							url : "../user?op=deleteUser",
							data : {
								"uid" : id
							},
							success : function(data) {
								if (data.msg == "删除成功") {
									alert(data.msg);
									location.reload();
								} else {
									alert(data.msg);
								}
							},
						})

					})

			/*修改用户信息 */
			$(document).on("click", "button[class='btn btn-info']", function() {
				/* 获取修改按钮当前行的用户信息，将获得的用户信息添加到模态框 */
				var table = $("#userTable").DataTable();
				var id = table.row($(this).parents("tr")).data().uid;
				$("#update_uid").val(id);
				var name = table.row($(this).parents("tr")).data().uname;
				$("#update_uname").val(name);

				var level = table.row($(this).parents("tr")).data().ulevel;
				$("#update_ulevel").val(level);

				var status = table.row($(this).parents("tr")).data().ustatus;
				$("#update_ustatus").val(status);

				var date = table.row($(this).parents("tr")).data().regdate;
				$("#update_regdate").val(date);
			})
			/*修改信息保存按钮点击事件*/
			$(document).on(
					"click",
					"#make_update",
					function() {
						console.log("aaaa")
						/*获取修改用户表单的信息*/
						var uid = $("#update_uid").val();
						var uname = $("#update_uname").val();
						var ulevel = $("#update_ulevel").val();
						var ustatus = $("#update_ustatus").val();
						var regdate = $("#update_regdate").val();
						console.log(uid + "--" + uname + "--" + ulevel + "--"
								+ ustatus + "--" + regdate)
						/*向服务器发出ajax请求  */

						$.ajax({
							type : "get",
							url : "../user?op=updateUser",
							data : {
								"uid" : uid,
								"uname" : uname,
								"ulevel" : ulevel,
								"ustatus" : ustatus,
								"regdate" : regdate
							},
							success : function(data) {
								if (data.msg == "修改成功") {
									alert(data.msg);
									location.reload();
								} else {
									alert(data.msg);
								}
							},
						})
					})

		})
	</script>

</body>

</html>